<template>
	<section class="vbox">
		<section class="scrollable padder">
			<section class="panel panel-default m-t-sm">
				<header class="panel-heading bg-light">
					视频
					<ul class="nav nav-tabs pull-right">
						<li class="active">
							<a href="#base-info" data-toggle="tab">
								<i class="fa fa-book text-success-dk"></i> 基础信息
							</a>
						</li>
						<li v-show="model.isSeries" @click="queryVideoItems">
							<a href="#video-items" data-toggle="tab">
								<i class="fa fa-list text-info-lt"></i>系列
							</a>
						</li>
					</ul>
				</header>
				<div class="panel-body">
					<div class="tab-content">
						<div class="tab-pane fade active in" id="base-info">
							<div class="panel-body">
								<form class="form-horizontal" v-on:submit.prevent="onSubmit">
									<div class="form-group">
										<label class="col-sm-2 control-label">标题</label>
										<div class="col-sm-10">
											<input type="text" v-model.trim="model.title" class="form-control parsley-validated" required="true">
										</div>
									</div>
									<div class="line line-dashed b-b line-lg pull-in"></div>
									<div class="form-group">
										<label class="col-sm-2 control-label">作者</label>
										<div class="col-sm-10">
											<input type="text" v-model.trim="model.author" class="form-control parsley-validated" required="true">
										</div>
									</div>
									<div class="line line-dashed b-b line-lg pull-in"></div>
									<div class="form-group">
										<label class="col-sm-2 control-label">分类</label>
										<div class="col-sm-10">
											<select class="form-control" v-model="model.category">
												<option v-for="item in categorys" v-bind:value="item.code" :key="item.code">
													{{ item.name }}
												</option>
												<option value="9999">其他</option>
											</select>
										</div>
									</div>
									<div class="line line-dashed b-b line-lg pull-in"></div>
									<div class="form-group">
										<label class="col-sm-2 control-label">海报</label>
										<div class="col-sm-10">
											<img v-if="model.poster" height="450" :src="$api.file.url.view + model.poster" alt="" class="r r-2x m-b-sm">
											<div>
												<a href="#image-upload" data-toggle="modal" class="btn btn-success">选择图片</a>
												<image-upload v-on:getPoster="getPoster"></image-upload>
											</div>

										</div>
									</div>
									<div class="line line-dashed b-b line-lg pull-in"></div>
									<div class="form-group">
										<label class="col-sm-2 control-label">是否是连续剧</label>
										<div class="col-sm-10">
											<el-radio-group v-model="model.isSeries">
												<el-radio :label="false">否</el-radio>
												<el-radio :label="true">是</el-radio>
											</el-radio-group>
										</div>
									</div>
									<div v-if="model.isSeries == false">
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label" for="input-id-1">视频来源</label>
											<div class="col-sm-10">
												<select class="form-control" v-model="model.mediaSource">
													<option v-for="item in mediaSources" v-bind:value="item.code" :key="item.code">
														{{ item.name }}
													</option>
													<option value="9999">其他</option>
												</select>
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label" for="input-id-1">链接地址</label>
											<div class="col-sm-10">
												<input type="text" class="form-control parsley-validated" required="true" placeholder="输入媒体文件网址" v-model="model.url">
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label" for="input-id-1">视频地址类型</label>
											<div class="col-sm-10">
												<el-radio-group v-model="model.videoUrlType">
													<el-radio v-for="item in videoUrlTypes" :label="item.code">{{ item.name }}</el-radio>
												</el-radio-group>
											</div>
										</div>
									</div>
									<div class="line line-dashed b-b line-lg pull-in"></div>
									<div class="form-group">
										<label class="col-sm-2 control-label">播放时长</label>
										<div class="col-sm-10">
											<input type="text" v-model.trim="model.duration" class="form-control parsley-validated" required="true">
										</div>
									</div>
									<div class="line line-dashed b-b line-lg pull-in"></div>
									<div class="form-group">
										<label class="col-sm-2 control-label">发布</label>
										<div class="col-sm-10">
											<el-switch v-model="model.publish" active-color="#1AB667">
											</el-switch>
										</div>
									</div>
									<div class="line line-dashed b-b line-lg pull-in"></div>
									<div class="form-group">
										<label class="col-sm-2 control-label">简介</label>
										<div class="col-sm-10">
											<ckeditor :editor="editor" v-model="model.intr" :config="editorConfig"></ckeditor>
										</div>
									</div>
									<div class="line line-dashed b-b line-lg pull-in"></div>
									<div class="form-group">
										<div class="col-sm-10 col-sm-offset-2">
											<button type="submit" class="btn btn-success">提交</button> &nbsp;
											<router-link class="btn btn-success" :to="'/video/'+ model.id" v-show="null != model.id">预览</router-link>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="tab-pane fade" id="video-items">
							<el-button v-for="item in videoItems" :key="item.id" @click="activeVideoItem = item">{{item.title}}</el-button>
							<el-button type="primary" @click="activeVideoItem = {}">新增</el-button>
							<br>
							<el-collapse v-model="activeVideoItemCollapse" accordion>
								<el-collapse-item name="1">
									<template #title>
										<i class="header-icon el-icon-info m-l-sm text-success"> 视频信息</i>
									</template>
									<form class="form-horizontal" v-on:submit.prevent="submitVideoItem">
										<div class="form-group">
											<label class="col-sm-2 control-label">标题</label>
											<div class="col-sm-5">
												<input type="text" v-model.trim="activeVideoItem.title" class="form-control parsley-validated" required="true">
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label">时长</label>
											<div class="col-sm-5">
												<input type="text" v-model.trim="activeVideoItem.duration" class="form-control parsley-validated">
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label" for="input-id-1">视频来源</label>
											<div class="col-sm-5">
												<select class="form-control" v-model="activeVideoItem.mediaSource">
													<option v-for="item in mediaSources" v-bind:value="item.code" :key="item.code">
														{{ item.name }}
													</option>
													<option value="9999">其他</option>
												</select>
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label" for="input-id-1">视频地址类型</label>
											<div class="col-sm-10">
												<el-radio-group v-model="activeVideoItem.videoUrlType">
													<el-radio v-for="item in videoUrlTypes" :label="item.code">{{ item.name }}</el-radio>
												</el-radio-group>
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label" for="input-id-1">链接</label>
											<div class="col-sm-5">
												<input type="url" class="form-control parsley-validated" required="true" placeholder="输入媒体文件网址" v-model="activeVideoItem.url">
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label" for="input-id-1">序号</label>
											<div class="col-sm-5">
												<input type="number" class="form-control parsley-validated" required="true" placeholder="输入序号" v-model="activeVideoItem.num">
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<div class="col-sm-10 col-sm-offset-2">
												<button type="button" class="btn btn-danger" @click="deleteVideoItem()">删除</button>
												&nbsp;
												<button type="submit" class="btn btn-success">提交</button>
											</div>
										</div>
									</form>
								</el-collapse-item>
								<el-collapse-item name="2">
									<template #title>
										<i class="header-icon el-icon-upload m-l-sm text-danger"> 视频采集</i>
									</template>
									<form class="form-horizontal" v-on:submit.prevent="collectPageParse">
										<div class="form-group">
											<label class="col-sm-2 control-label" for="input-id-1">视频来源</label>
											<div class="col-sm-5">
												<select class="form-control" v-model="videoCollectPage.mediaSource">
													<option v-for="item in mediaSources" v-bind:value="item.code" :key="item.code">
														{{ item.name }}
													</option>
												</select>
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label">采集页面地址</label>
											<div class="col-sm-10">
												<input type="text" v-model.trim="videoCollectPage.url" class="form-control parsley-validated" required="true">
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<div class="col-sm-10 col-sm-offset-2">
												<button type="submit" class="btn btn-success">解析视频</button>
											</div>
										</div>
									</form>

									<div class="line line-dashed b-b line-lg pull-in"></div>
									<div class="row">
										<div class="col-sm-6">
											<div v-show="videoCollectList.length>0" style="padding-bottom: 5px;">
												<label>视频列表</label>
												<span class="pull-right">
													<input type='checkbox' v-model='checked' @click='checkedAll'> 全选
												</span>
											</div>
											<div class="list-group">
												<a href="#" class="list-group-item" v-for="(item, i) in videoCollectList">
													<i class="fa fa-chevron-right icon-muted"></i>
													<span class="badge badge-empty">{{ i + 1 }}</span>
													<input type="checkbox" :value="item" v-model="checkedCollectVideos" style="margin: 0 10px 0;">
													<a :href="item.mediaSourceWebUrl" target="_blank"> {{ item.title }} </a>
												</a>
											</div>
										</div>
										<div class="col-sm-6">
											<div v-show="checkedCollectVideos.length>0" style="padding-bottom: 5px;">
												<label>待采集列表</label>
												<button type="button" class="btn btn-success pull-right" @click="collectVideos">采集</button>
											</div>
											<div class="list-group">
												<a href="#" class="list-group-item" v-for="(item, i) in checkedCollectVideos">
													<i class="fa fa-chevron-right icon-muted"></i>
													<span class="badge badge-empty">{{ i + 1 }}</span>
													<i class="fa fa-bookmark icon-muted fa-fw"></i>
													<a :href="item.mediaSourceWebUrl" target="_blank"> {{ item.title }} </a>
												</a>
											</div>
										</div>
									</div>
								</el-collapse-item>
							</el-collapse>
						</div>
					</div>
				</div>
			</section>
		</section>
		<btn-goback></btn-goback>
	</section>
</template>

<script>
	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
	import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
	import {
		getTime
	} from '@/utils'

	export default {
		components: {

		},
		props: {
			id: {
				type: String,
				default: null
			},
		},
		data() {
			return {
				imgFile: '',
				categorys: [],
				mediaSources: [],
				videoUrlTypes: [],
				editor: ClassicEditor,
				editorConfig: {
					language: 'zh-cn'
				},
				model: {
					id: null,
					title: '',
					author: '',
					source: '1',
					updateTime: getTime(),
					publish: true,
					isSeries: false,
					intr: '',
					duration: '',
					poster: ''
				},
				videoItems: [{
					title: '第一集',
					duration: '20:52',
					url: 'http://ddfdfdf/..df.df.'
				}],
				activeVideoItem: {},
				activeVideoItemCollapse: '1',
				videoCollectPage: {},
				videoCollectList: [],
				checkedCollectVideos: [],
				checked: false
			}
		},
		mounted() {

			//初始化字典数据
			this.$api.sysDict.queryDictItems("video_category").then(data => {
				this.categorys = data;
			});

			this.$api.sysDict.queryDictItems("media_source").then(data => {
				this.mediaSources = data;
			});

			this.$api.sysDict.queryDictItems("video_url_type").then(data => {
				this.videoUrlTypes = data;
			});

			//业务逻辑
			const params = this.$route.params;
			console.debug('params:', params);
			if (params.id != null && params.id != 0) {
				this.$api.video.queryById(params.id).then(data => {
					this.model = data;
				});
			}
		},
		methods: {
			onSubmit() {
				console.debug('model', this.model);
				console.debug('model.intr', this.model.intr);
				if (this.model.id == null) {
					this.$api.video.add(this.model).then(data => {
						this.model.id = data.id;
						console.debug('model.id', data);
					});
				} else {
					this.$api.video.update(this.model);
				}
			},
			publish(e) {
				console.debug('publish:', e.currentTarget.checked);
				this.model.publish = e.currentTarget.checked ? '1' : '0';
			},
			getPoster(code) {
				this.model.poster = code;
			},
			queryVideoItems() {
				this.$api.videoItem.list({
					videoId: this.model.id
				}).then(data => {
					this.videoItems = data;
				});
			},
			submitVideoItem() {
				if (this.activeVideoItem.id == null) {
					this.activeVideoItem.videoId = this.model.id;
					this.$api.videoItem.add(this.activeVideoItem).then(data => {
						this.activeVideoItem.id = data.id;
						this.queryVideoItems();
					});
				} else {
					this.$api.videoItem.update(this.activeVideoItem);
				}
			},
			deleteVideoItem() {
				this.$api.videoItem.delete(this.activeVideoItem.id).then(() => {
					this.queryVideoItems();
				});

			},
			collectPageParse() {
				this.$api.video.collectPageParse(this.videoCollectPage).then(data => {
					this.videoCollectList = data;
				});
			},
			collectVideos() {
				this.$api.video.collectVideos({
					mediaSource: this.videoCollectPage.mediaSource,
					isSeries: true,
					videoId: this.model.id,
					videoList: this.checkedCollectVideos
				}).then(data => {
					this.queryVideoItems();
				});
			},
			//全选采集列表
			checkedAll() {
				if (this.checked) { //实现反选
					this.checkedCollectVideos = [];
				} else { //实现全选
					this.checkedCollectVideos = [];
					this.videoCollectList.forEach((item) => {
						this.checkedCollectVideos.push(item);
					});
				}
			}
		}

	}
</script>

<style scoped="scoped">
	.el-button {
		margin-bottom: 10px !important;
	}
</style>
